<template>
  <div>
    <el-dialog
      @closed="closeDictValueDialog"
      :title="!form.id ? '新增字典值' : '修改字典值'"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible">
      <el-form :model="form" :rules="rules" ref="form" @keyup.enter.native="saveOrUpdate()" label-width="120px">
        <el-form-item label="字典值描述" prop="name">
          <el-input v-model="form.value"></el-input>
        </el-form-item>

        <el-form-item label="字典值">
          <el-input v-model="form.code"></el-input>
        </el-form-item>

        <el-form-item label="排序">
          <el-input v-model="form.sort"></el-input>
        </el-form-item>

        <el-form-item label="所属父类">
          <el-cascader
            :options="parentDictValueList"
            v-model="form.parentArrayId"
            change-on-select>
          </el-cascader>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
      <el-button @click="closeForm">取消</el-button>
      <el-button type="primary" @click="saveOrUpdate()">确定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
      name: 'dict-value-form',
      props: {
          showFlag: {
              type: Boolean,
              required: false,
              default: false
          },

          formData: {
              type: Object,
              required: false,
              default: {

              }
          }
      },

      watch: {
          formData (val) {
              this.form = val
          },

          showFlag (val) {
              this.dialogVisible = val
              if (this.dialogVisible) {
                  this.getTreeDictValueList()
              }
          }
      },

      mounted () {
          this.form = this.formData
          this.dialogVisible = this.showFlag
      },

      data () {
          return {
              dialogVisible: false,
              props: {
                  value: 'id'
              },
              form: {},
              rules: {
                  value: [
                      {required: true, message: '请输入字典值名称', trigger: 'blur'}
                  ],
                  code: [
                      {required: true, message: '请输入字典值', trigger: 'blur'}
                  ]
              },
              parentDictValueList: []
          }
      },

      methods: {
          closeForm () {
              this.dialogVisible = false
              this.$emit('close')
          },

          closeDictValueDialog () {
              this.dialogVisible = false
              this.$emit('closeDialog')
          },

          saveOrUpdate () {
              let parentId = null // 取最后一位作为父类id
              let parentIdsLength = this.form.parentArrayId.length
              if (parentIdsLength > 0) {
                  parentId = this.form.parentArrayId[parentIdsLength - 1]
              }
              this.$refs['form'].validate((valid) => {
                  if (valid) {
                      this.form.parent_id = parentId
                      delete (this.form.parentArrayId)
                      this.axios.post(this.$http.httpUrl('/dict/saveOrUpdateDictValue'), this.form)
                          .then(response => {
                              if (response.data.code === 1) {
                                  this.$message({
                                      type: 'success',
                                      message: response.data.message
                                  })
                                  this.form = {}
                                  this.closeForm()
                              } else {
                                  this.$message({
                                      type: 'error',
                                      message: response.data.message
                                  })
                              }
                          })
                  }
              })
          },

          getTreeDictValueList () {
              this.axios.get(this.$http.httpUrl('/dict/getDictValueTreeList')).then((response) => {
                  if (response.data.code === 1) {
                      this.parentDictValueList = response.data.data
                  }
              }).catch((e) => {
                  console.log(e)
              })
          }
      }
  }
</script>

<style scoped>

</style>
